<template>
  <view style="width: 100vw;height: 100vh;">
    <hx-navbar title="赛事详情" :back="true" :fixedWhiteStyle="true" :fixed="false" :color="kblackColor"
               barPlaceholder="hidden" transparent="auto">
    </hx-navbar>
    <view class="head_class" :style="{backgroundImage: 'url(' + info.themeImage + ')'}"></view>
    <view class="right_rule" @click="go_rule">比赛规则</view>
    <view style="width: 750rpx;background: #ffffff;border-radius: 68rpx 68rpx 0rpx 0rpx;margin-top: -145rpx;padding: 30rpx 30rpx 10rpx 30rpx;">
      <view class="link_1" style="margin-top: 0;">
        <view v-if="info.status == 4" style="background: rgba(189, 189, 189, 1); text-align: center;transform: skewX(-20deg);width:138rpx; height: 50rpx;line-height: 50rpx; color: rgba(255, 255, 255, 1)">
          <view style="transform: skewX(20deg)">{{info.status | status_filter}}</view>
        </view>
        <view v-else :style="{'background':buttonBcak}" style="text-align: center;transform: skewX(-20deg);width:138rpx; height: 50rpx;line-height: 50rpx; color: #e3cbf1; ">
          <view style="transform: skewX(20deg)">{{info.status | status_filter}}</view>
        </view>
        <view style="font-size: 24rpx;color: #333333;margin-left: 10rpx;">场次编号：{{info.eventName}}</view>
        <view class="copy_container" @click="copy_character">
          <image src="@/static/finish/copy_zimu.png"></image>
        </view>
      </view>
      <view class="link_1" style="margin: 30rpx 0">
        <view class="zw_logo">
          <image src="@/static/finish/zw_logo.png"></image>
        </view>
        <view class="host">举办方：金世界</view>
        <view v-if="info.investor" class="zw_logo" style="margin-left: 50rpx;">
          <image :src="info.investorImage"></image>
        </view>
        <view v-if="info.investor" class="host">赋能方：{{info.investor}}</view>
      </view>
      <view class="progress_container">
        <image src="@/static/finish/title.png"></image>
        <text>赛事进程</text>
      </view>
      <view class="step_container">
        <uni-steps active-color="rgb(108, 88, 213)" :options="list1" :active="active"/>
      </view>
      <view class="progress_container">
        <image src="@/static/finish/title.png"></image>
        <text>赛事奖品</text>
      </view>
      <view class="reward_container">
        <view class="reward_container_img">
          <image src="@/static/finish/reward_1.png"></image>
          <image src="@/static/finish/reward_2.png"></image>
          <image src="@/static/finish/reward_3.png"></image>
        </view>
        <view class="reward_container_desc" @click="goDetail">点击查看详情></view>
      </view>
      <view class="link_1" style="padding: 0 20rpx;">
        <view class="left_link">
          <text style="font-size: 22rpx; font-weight: 500">活动进度：{{info.worksCount ? info.worksCount : 0}}幅作品已参与</text>
          <view style="margin-top: 10rpx;">
            <progress :percent="pgList" activeColor='#6958D5' show-info stroke-width="3"/>
          </view>
        </view>
        <!-- 中签参赛预约 -->
        <view class="right_link">
          <view class="botton"  @click="zhongqianClick" v-if="!people_full &&  info.evolveStatus == 1"  :style="{'background':buttonBcak}">预约参赛</view>
          <view class="botton"  @click="zhongqianClick" v-if="!people_full && info.evolveStatus == 2"  :style="{'background':buttonBcak}">AI参赛</view>
          <view v-if="people_full" class="botton_grey">报名已满</view>
          <view class="botton_grey" v-if="info.evolveStatus == 3">报名结束</view>
          <view v-if="info.evolveStatus == 4" class="botton_grey">已结束</view>
        </view>
      </view>
      <view v-if="info.help==1 && info.evolveStatus == 3" class="invite" @click="invitePeople">
        <image src="@/static/finish/invite.png"></image>
      </view>
      <view class="hade_input">
        <view style="width: 80rpx;height: 80rpx;display: flex;align-items: center;justify-content: center;" @tap="search">
          <image src="@/static/aipicture/sousuo.png"></image>
        </view>
        <input type="text" class="search_input" v-model="search_name" @confirm="search"
               placeholder="搜索编号" placeholder-class="search_size">
      </view>
      <view class="tab_box link_1">
        <view class="tab_dd" :class="[{sel:0 == tabCurrent},{ nsel:0 != tabCurrent}]" @tap="set_tab(0)">最新</view>
        <view class="tab_dd" :class="[{sel:1 == tabCurrent},{ nsel:1 != tabCurrent}]" @tap="set_tab(1)">我的</view>
        <view class="tab_dd" :class="classObject" @tap="set_tab(3)">权重票</view>
        <view class="sort_container" @click="changeSort">
          <image src="@/static/finish/sort.png"></image>
        </view>
        <view v-if="info.evolveStatus == 4" class="tab_dd" :class="[{sel:4 == tabCurrent},{ nsel:4 != tabCurrent}]" @tap="set_tab(4)">
          获奖名单
        </view>
      </view>
    </view>
    <view v-if="tabCurrent !== 4 && list.length > 0" style="width: 690rpx;display: flex;margin: 10rpx auto; padding-bottom: 50rpx;	flex-wrap: wrap;justify-content: space-between; align-content: stretch;">
      <view v-for="item in list" style="width: 334rpx;margin-top: 20rpx;">
        <view style="width: 334rpx;position: relative;">
          <image @click="click_img(item.worksImage,item.width)" :src="item.worksImage" style="width: 334rpx; height: 300rpx;border-radius: 36rpx 36rpx 0rpx 0rpx;" mode="aspectFill"></image>
          <view v-if="item.ranking || item.ticketTotal" style="font-size: 24rpx;padding:8rpx 20rpx; background: #000000; border-radius: 26rpx;opacity: 0.7;position: absolute; bottom: 175rpx ;right: 10rpx;color: #fff;">
            <text v-if="item.ranking">暂列第{{item.ranking}}位</text><br>
            <text v-if="item.ticketTotal">权重票：{{ item.ticketTotal }}</text>
          </view>
          <view style="margin-top: -10rpx;padding-top: 15rpx;height: 150rpx;border-radius:2rpx 2rpx 30rpx 30rpx; background: #F8F6FF;">
            <view style="font-size: 22rpx;text-align: center;height: 40rpx;color: rgba(113, 76, 213, 1);" @click="getCopy(item.sn)">
              作品编号：{{ item.sn }}
            </view>
            <view v-if="info.evolveStatus === 3" @click="toupiao(item.id)" style="margin: 10rpx auto;width: 294rpx;border-radius: 34rpx;line-height: 68rpx;text-align: center;color: white;height: 68rpx;" :style="{'background':buttonBcak}">投票</view>
            <view v-else style="margin: 10rpx auto;width: 294rpx;border-radius: 34rpx;line-height: 68rpx;text-align: center;color: #00000096;height: 68rpx; background: #e5e5e5">投票</view>
          </view>
        </view>
      </view>
    </view>
    <view class="none_box" v-if="tabCurrent !== 4 && list.length === 0">
      <image src="@/static/without.png" mode="widthFix"></image>
    </view>
    <!-- 获奖名单 -->
    <view v-if="tabCurrent === 4" class="switch_class">
      <view style="font-size: 24rpx; font-weight: 500;">只看我的作品</view>
      <switch @change="changeSwitch" color="#6958D5" :checked="switch_show"/>
    </view>
    <view v-if="tabCurrent === 4 && list.length > 0" class="row_class" style="padding-bottom: 40rpx;">
      <view v-if="!only_see_my_thing && list.length >= 3" style="display: flex;text-align: center; padding-bottom: 50rpx">
        <view class="row_tow chunk">
          <view class="row_chunk_image row_chunk_image_first">
            <image :src="list[1].worksImage" class="row_image" mode="aspectFill"></image>
            <view class="row_ids">{{list[1].ranking}}</view>
          </view>
          <view class="row_tid">编号：{{list[1].sn}}</view>
          <view class="row_name">权重票：{{ list[1].ticketTotal }}</view>
        </view>
        <view class="row_one chunk">
          <view class="row_chunk_image">
            <image :src="list[0].worksImage" class="row_image" mode="aspectFill"></image>
            <view class="row_ids">{{list[0].ranking}}</view>
          </view>
          <view class="row_img_src">
            <image src="@/static/finish/gongshiyipin.png"></image>
          </view>
          <view class="row_tid">编号：{{list[0].sn}}</view>
          <view class="row_name">权重票：{{ list[0].ticketTotal }}</view>
        </view>
        <view class="row_three chunk">
          <view class="row_chunk_image">
            <image :src="list[2].worksImage" class="row_image" mode="aspectFill"></image>
            <view class="row_ids">{{list[2].ranking}}</view>
          </view>
          <view class="row_tid">编号：{{list[2].sn}}</view>
          <view class="row_name">权重票：{{ list[2].ticketTotal }}</view>
        </view>
      </view>

      <template v-if="!only_see_my_thing" v-for="(item,index) in list">
        <view v-if="index+1>3" style="margin: 20rpx auto;padding:20rpx;width: 690rpx;height: 150rpx;background: rgba(245, 244, 255, 1);border-radius: 20rpx;display: flex;justify-content: space-between;align-items: center">
          <view class="row_grade">{{ item.ranking }}</view>
          <view class="row_tx">
            <image :src="item.worksImage" style="width: 108rpx;height: 108rpx;border-radius: 15rpx;" mode="aspectFill"></image>
          </view>
          <view class="row_mess" style="color:rgba(113, 76, 213, 1)">
            <view style="font-weight: 400;font-size: 24rpx;">作品编号：{{item.sn}}</view>
            <view style="margin-top:22rpx;font-size: 24rpx;">权重票：{{item.ticketTotal}}</view>
          </view>
        </view>
      </template>
      <template v-if="only_see_my_thing || list.length === 1" v-for="(item) in list">
        <view style="margin: 20rpx auto;padding:20rpx;width: 690rpx;height: 150rpx;background: rgba(245, 244, 255, 1);border-radius: 20rpx;display: flex;justify-content: space-between;align-items: center">
          <view class="row_grade">{{ item.ranking }}</view>
          <view class="row_tx">
            <image :src="item.worksImage" style="width: 108rpx;height: 108rpx;border-radius: 15rpx;"></image>
          </view>
          <view class="row_mess" style="color:rgba(113, 76, 213, 1)">
            <view style="font-weight: 400;font-size: 24rpx;">作品编号：{{item.sn}}</view>
            <view style="margin-top:22rpx;font-size: 24rpx;">权重票：{{item.ticketTotal}}</view>
          </view>
        </view>
      </template>
    </view>
	<!-- v-if="list.length === 0"  -->
	<view class="total-btn" @click.stop="totalPicture()">
		<image class="total-bg" src="../../../static/aipicture/total-rank-bg.png"></image>
		<text class="total-text">全部作品</text>
	</view>
    <!-- 获奖名单无数据情况   -->
    <view class="none_box" v-if="tabCurrent === 4 && list.length === 0">
      <image src="@/static/without.png" mode="widthFix"></image>
    </view>
    <uni-popup ref="confirmpop" @maskClick="mask_click">
      <view class="alert_container">
        <view class="feiyong">目前权重票剩余<text class="text2">{{rest_ticket}}</text>票</view>
        <view class="number_container">
          <uni-number-box :min="1" @change="changeValue"/>
        </view>
        <view class="botton" @click="closeConf" :style="{'background':buttonBcak}">投票</view>
      </view>
    </uni-popup>
    <uni-popup ref="img_pop">
      <view v-if="show_long_img" class="img_pop_container_2" @click="closeImagePop()">
        <image :src="img_pop" mode="aspectFit"></image>
      </view>
      <view v-else class="img_pop_container" @click="closeImagePop()">
        <image :src="img_pop" mode="aspectFit"></image>
      </view>
    </uni-popup>
    <uni-popup ref="img_page_pop">
      <view class="alert_pop_container">
        <view class="vote_miss_content">快来参加比赛获得投票机会吧</view>
        <view class="vote_miss_rule" @click="go_rule">了解比赛规则</view>
        <view class="vote_miss_button" @click="closeVoteMiss" >知道了</view>
      </view>
    </uni-popup>
    <uni-popup ref="wallet_alert">
      <view class="popUpType2">
        <view class="popCardNumber">
          您未开户，请先开户后参赛
        </view>
        <view style="padding: 0 50rpx; display: flex; align-items: center; justify-content: space-evenly">
          <view style="margin: 20rpx auto;" @click="wallet_cancel()" class="use-btn bg-white">取消</view>
          <view style="margin: 20rpx auto;" @click="wallet_go()" class="use-btn bg-blue">去开户</view>
        </view>
      </view>
    </uni-popup>

    <!-- 海报弹框 -->
    <uni-popup ref="posterPopup" type="center">
      <view class="center_poter" v-if="showPoster">
        <!-- posterData： 海报数据 -->
        <poster :posterData="posterData"></poster>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  h5Url
} from '@/config/config.js';
import poster from '@/components/ai_poster/poster'

export default {
  components: {
    poster
  },
  data() {
    return {
      posterData: {
        // 背景
        bgImage: '',
        // 商品链接
        url: ''
      },
      showPoster: false,
      timer: null,
      show_long_img: false,
      img_pop: null,
      switch_show: false,
      only_see_my_thing: false,
      vote_ticket: 1,
      rest_ticket: null,
      vote_id: null,
      id: null,
      page: 1,
      limit: 10,
      hasNextPage: true,
      list1: [{
        title: '预约参赛'
      }, {
        title: '正式报名',
        desc: null
      }, {
        title: '投票开始',
        desc: null
      }, {
        title: '比赛结束',
        desc: null
      }],
      info: {},
      active: 1,//1预约中，2正式报名，3投票中，4比赛结束
      search_name: null, //搜索框
      tabCurrent: 3,
      buttonBcak: 'linear-gradient(rgba(108, 88, 213, 1), rgba(170, 86, 215, 1))', //按钮颜色
      list: []
    }
  },
  computed: {
    classObject: function () {
      return {
        sel: this.tabCurrent === 2 || this.tabCurrent === 3,
        nsel: this.tabCurrent !== 2 && this.tabCurrent !== 3,
      }
    },
    pgList: function () {
      if (this.info.worksCount) {
        return ((Number(this.info.worksCount) / this.info.astrictNum) * 100).toFixed(1)
      } else {
        return 0
      }
    },
    people_full: function () {
      let now = new Date()
      let anew = new Date(this.info.signupEndTime)
      let change = anew - now
      if (this.info.worksCount == this.info.astrictNum && change > 0) {
        return true
      } else {
        return false
      }
    }
  },
  filters: {
    status_filter: function (value) {
      const map = {
        1: '未开放',
        2: '预约中',
        3: '进行中',
        4: '已结束'
      }
      return map[value];
    }
  },
  onLoad(options) {
    this.id = options.id;
  },
  onShow() {
    this.getDetail()
    this.getList(3)
    this.timer = setInterval(this.reNewPage, 60000)
  },
  onHide() {
    if (this.timer) {
      clearInterval(this.timer)
	 this.timer = null
    }

  },
  onReachBottom() {
    if (this.hasNextPage) {
      this.page = this.page + 1
      let parameter
      if (this.tabCurrent === 4) {
        parameter = 3
      } else {
        parameter = this.tabCurrent
      }
      let data = {
        pageNo: this.page,
        pageSize: this.limit,
        parameter: parameter,
        aiEventId: this.id
      }
      if (this.search_name) {
        Object.assign(data, {
          sn: this.search_name
        })
      }
      this.$api.aievent_list(data, (res) => {
        if (res.data && res.data.list) {
          this.list = this.list.concat(res.data.list);
          this.hasNextPage = res.data.total >= res.data.current * res.data.size
        }
      });
    }
  },
  onPullDownRefresh() {
    this.list = []
    this.page = 1
    this.hasNextPage = true
    this.getList()
    uni.stopPullDownRefresh()
  },
  methods: {
   totalPicture(){
	  uni.navigateTo({
	    url: `/pages/aipicture/finish/rank?id=${this.id}`
	  })
   },
    mask_click() {
      this.vote_ticket = 1
    },
    wallet_go() {
      uni.navigateTo({
        url: '/pages/user/wallet/wallet-list'
      })
    },
    wallet_cancel() {
      this.$refs.wallet_alert.close()
    },
    reNewPage() {
      this.getDetail()
      this.getList()
    },
    closeVoteMiss() {
      this.$refs.img_page_pop.close()
    },
    click_img(img,width) {
      this.show_long_img = width === 720;
      this.img_pop = img;
      this.$refs.img_pop.open()
    },
	closeImagePop(){
		this.$refs.img_pop.close()
	},
    getCopy(sn) {
      uni.setClipboardData({
        data: sn,
        success: () => {
          uni.showToast({
            icon: 'none',
            title: '已成功复制作品编号！'
          })
        }
      })
    },
    changeSwitch(e) {
      this.page = 1
      if (e.detail.value) {
        this.switch_show = true
        this.only_see_my_thing = true
        this.list = []
        this.getList(1)
      } else {
        this.switch_show = false
        this.only_see_my_thing = false
        this.list = []
        this.getList(3);
      }
    },
    go_rule() {
      this.$refs.img_page_pop.close()
      uni.navigateTo({
        url: '/pages/aipicture/finish/rule',
      })
    },
    goDetail() {
      uni.navigateTo({
        url: '/pages/aipicture/finish/reward',
      })
    },
    getDetail() {
      this.$api.aievent_detail({
        id: this.id
      }, (res) => {
        if (res.data) {
          this.info = res.data;
          this.active = res.data.evolveStatus - 1
          if (res.data && res.data.signupBeginTime) {
            this.list1[1].desc = res.data.signupBeginTime.substring(10,16);
          }
          if (res.data && res.data.signupEndTime) {
            this.list1[2].desc = res.data.signupEndTime.substring(10,16);
          }
          if (res.data && res.data.voteEndTime) {
            this.list1[3].desc = res.data.voteEndTime.substring(10,16);
          }
        }
      })
    },
    getList(id) {
      let data = {
        pageNo: this.page,
        pageSize: this.limit,
        parameter: id ? id : this.tabCurrent,
        aiEventId: this.id
      }
      if (this.search_name) {
        Object.assign(data, {
          sn: this.search_name
        })
      }
      this.$api.aievent_list(data, (res) => {
        if (res.data && res.data.list) {
          this.list = res.data.list
          this.hasNextPage = res.data.total >= res.data.current * res.data.size
        }
      });
    },
    changeSort() {
      if (this.tabCurrent === 2) {
        this.getList(3);
        this.tabCurrent = 3
      } else {
        this.getList(2);
        this.tabCurrent = 2
      }
    },
    invitePeople() {
      // #ifdef H5
      uni.navigateTo({
        url: '/pages/aipicture/finish/ai_invite_code?id=' + this.id,
      })
      // #endif
      // #ifdef APP-PLUS
      // iOS ｜ Android
      this.openPoster()
      // #endif
    },
    openPoster() {
      if (!(this.$db.get('userToken'))){
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      this.showPoster = false
      // uni.showLoading({
      //   title: '海报绘制中..'
      // })
      this.$api.userInfo({}, res => {
        if (res.status) {
          this.$api.aievent_detail({
            id: this.id
          }, (res_init) => {

            let profile = res.data;
            let qrUrl = h5Url + '#/pages/login/register?invitecode=' + profile.uid + '&codeWay=ai';
            let posterbg = ''
            // 修改海报背景
            posterbg = res_init.data.helpImage
            this.posterData = {
              bgImage: posterbg,
              url: qrUrl
            }
            this.$refs.posterPopup.open()
            setTimeout(() => {
              uni.hideLoading()
              this.showPoster = true
            }, 400)

          })
        }
      })
    },
    copy_character() {
      uni.setClipboardData({
        data: this.info.eventName,
        success: () => {
          uni.showToast({
            icon: 'none',
            title: '已成功复制场次编号！'
          })
        }
      })
    },
    zhongqianClick() {
      this.$api.userInfo({}, res => {
        if (res.status && res.data.walletStatus) {
          if(res.data.walletStatus.hfStatus == 1 || res.data.walletStatus.sdStatus == 1) {
            // 已开户
            uni.navigateTo({
              url: '/pages/aipicture/accrue_picture/accrue_picture?id=' + this.id
            })
          } else {
            this.$refs.wallet_alert.open()
            // uni.showModal({
            //   title: '提示',
            //   content: '您未开户,请先开户后参赛',
            //   confirmText: '去开户',
            //   cancelText: '取消',
            //   success: function (res) {
            //     if (res.confirm) {
            //       uni.navigateTo({
            //         url: '/pages/user/wallet/wallet-list'
            //       })
            //     } else if (res.cancel) {
            //     }
            //   }
            // });
          }
        }
      })
    },
    toupiao(id) {
      this.vote_id = id
      this.$api.aievent_vote({
        ticket: 0,
        aiEventId: this.id,
        aiEventWorksId: this.vote_id
      }, (res) => {
        if (res.message || res.data.message) {

          //#ifdef APP-IOS || APP-ANDROID
          setTimeout(()=>{
            plus.nativeUI.toast(res.message || res.data.message)
          },1000)
          //#endif

          // #ifndef APP-IOS || APP-ANDROID
          uni.showToast({
            title: res.message || res.data.message,
            icon: 'none'
          })
          // #endif

        } else if (res.data.data == 0) {
          this.$refs.img_page_pop.open()
        } else {
          this.rest_ticket = res.data.data;
          this.$refs.confirmpop.open()
        }
      })
    },
    closeConf() {
      this.$api.aievent_vote({
        ticket: this.vote_ticket,
        aiEventId: this.id,
        aiEventWorksId: this.vote_id
      }, (res) => {
        if (res.message || res.data.message) {
            //#ifdef APP-IOS || APP-ANDROID
            setTimeout(()=>{
              plus.nativeUI.toast(res.message || res.data.message)
            },1000)
            //#endif
            // #ifndef APP-IOS || APP-ANDROID
              uni.showToast({
                title: res.message || res.data.message,
                icon: 'none'
              })
            // #endif
        } else {
          //#ifdef APP-IOS || APP-ANDROID
          setTimeout(()=>{
            plus.nativeUI.toast('投票成功')
          },1000)

          //#endif
          // #ifndef APP-IOS || APP-ANDROID
          uni.showToast({
            icon: 'none',
            title: '投票成功'
          })
          // #endif
          this.page = 1
          this.rest_ticket = res.data.data
          setTimeout(this.getList,1000);
        }
      })
    },
    changeValue(e) {
      this.vote_ticket = e
    },
    search() {
      this.page = 1
      this.list = []
      if (this.tabCurrent === 4) {
        this.getList(3)
      }else {
        this.getList();
      }
    },
    set_tab: function (id) {
      this.tabCurrent = id
      this.page = 1
      if (id === 4) {
        this.switch_show = false
        this.getList(3);
      } else {
        this.getList(id);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.use-btn {
  margin: 10rpx 20rpx 20rpx 20rpx;
  color: white;
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  text-align: center;
}
.bg-white {
  color: #636363;
  background: #e5e5e5;
}
.bg-blue {
  background: rgba(170, 86, 215, 1);
}
.popUpType2 {
  border-radius: 20rpx;
  border: 5rpx solid rgba(170, 86, 215, 1);
  background: #ffffff;
  width: 630rpx;
  margin: 30rpx auto;
  padding: 30rpx 0;


  .popname {
    text-align: center;
    font-size: 28rpx;
    color: #000000;
  }

  .popCardNumber {
    height: 100rpx;
    line-height: 100rpx;
    font-size: 32rpx;
    text-align: center;
  }
}
.alert_pop_container {
  width: 710rpx;
  height: 616rpx;
  background: url("@/static/finish/vote_miss.png") no-repeat center center;
  background-size: contain;
  padding-top: 180rpx;
  .vote_miss_content {
    height: 25rpx;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #000000;
    line-height: 28rpx;
    opacity: 0.9;
    margin-bottom: 50rpx;
  }
  .vote_miss_rule {
    text-align: center;
    height: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #7655D5;
    line-height: 28rpx;
    text-decoration-line: underline;
  }
  .vote_miss_button {
    width: 400rpx;
    text-align: center;
    background: linear-gradient(rgba(108, 88, 213, 1), rgba(170, 86, 215, 1));
    height: 64rpx;
    margin: 50rpx auto;
    border-radius: 42rpx;
    line-height: 64rpx;
    color: white;
  }
}
.img_pop_container {
  width: 700rpx;
  height: 700rpx;
  image {
    width: 700rpx;
    height: 700rpx;
  }
}
.img_pop_container_2 {
  width: 700rpx;
  height: 1244rpx;
  image {
    width: 700rpx;
    height: 1244rpx;
  }
}
.none_box {
  width: 534rpx;
  margin: 0rpx auto;
  font-size: 32rpx;
  color: #ABA9B4;
}

.none_box image {
  width: 100%;
  height: 534rpx;
  margin-bottom: 10rpx;
}
.reward_container {
  width: 669rpx;
  height: 275rpx;
  padding-top: 25rpx;
  margin: 25rpx auto 0 auto;
  background: #F5F4FF;
  border-radius: 16rpx;
  .reward_container_img {
    display: flex;
    align-items: center;
    justify-content: space-around;
    image {
      width: 166rpx;
      height: 168rpx;
    }
  }
  .reward_container_desc {
    text-align: center;
    height: 36rpx;
    margin-top: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #7A54D6;
    line-height: 36rpx;
    text-decoration-line: underline;
  }
}
.right_rule {
  color: #ffffff;
  position: absolute;
  right: 0;
  top: 250rpx;
  text-align: center;
  width: 50rpx;
  height: 180rpx;
  background: linear-gradient(0deg, #6C58D5, #AA56D7);
  border-radius: 10rpx 0rpx 0rpx 10rpx;
  border: 2px solid #E8B2FF;
  border-right: 0;
}
.progress_container {
  display: flex;
  margin-top: 30rpx;
  align-items: center;
  padding-left: 10rpx;
  image {
    width: 39rpx;
    height: 39rpx;
    margin-right: 20rpx;
  }
  text {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #000000;
    opacity: 0.9;
  }
}
.alert_container {
  width: 587rpx;
  height: 587rpx;
  background: url("@/static/finish/alert_pop.png") no-repeat center center;
  background-size: contain;
  padding-top: 150rpx;
  .feiyong {
    margin-bottom: 20rpx;
    text-align: center;
    height: 34rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 34rpx;
    letter-spacing: 1px;
  }
  .botton {
    width: 400rpx;
    text-align: center;
    height: 64rpx;
    margin: 50rpx auto;
    border-radius: 42rpx;
    line-height: 64rpx;
    color: white;
  }
  .number_container {
    width: 400rpx;
    margin: 40rpx auto 0 auto;
    text-align: center;
  }
}

.step_container {
  background: #F5F4FF;
  padding: 20rpx;
  width: 656rpx;
  margin: 25rpx auto 0 auto;
  image {
    width: 656rpx;
    height: 107rpx;
  }
}
.invite {
  margin: 40rpx auto;
  height: 138rpx;
  width: 654rpx;

  image {
    height: 138rpx;
    width: 654rpx;
  }
}

.sort_container {
  width: 50rpx;
  height: 50rpx;

  image {
    width: 50rpx;
    height: 50rpx;
  }
}

.copy_container {
  width: 25rpx;
  height: 25rpx;
  line-height: 25rpx;
  margin-left: 11rpx;

  image {
    width: 25rpx;
    height: 25rpx;
  }
}

.zw_logo {
  margin-right: 20rpx;
  height: 47rpx;
  line-height: 47rpx;

  image {
    width: 47rpx;
    height: 47rpx;
    border-radius: 50%;
  }
}

page {
  margin: 0;
  padding: 0;
}

.head_class {
  height: 630rpx;
  width: 100%;
  //background-image: url('../../../static/test2.png');
  background-size: 100% 100%;
}

.link_1 {
  display: flex;
  margin-top: 30rpx;
  align-items: center;

  .purple_color {
    color: rgba(111, 88, 214, 1);
  }
}

.host {
  // width: 290rpx;
  height: 40rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 40rpx;
  margin-right: 10rpx;
}

.explain {
  width: 690rpx;
  // height: 114rpx;
  padding: 20rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #673DE7;
  line-height: 42rpx;
  background: #F5F4FF;
  border-radius: 8rpx;
}

.left_link {
  width: 55%;

}

.right_link {
  width: 50%;

  .botton {
    float: right;
    width: 256rpx;
    height: 80rpx;

    border-radius: 40rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 80rpx;
    font-weight: 400;
    color: #FFFFFF;
  }
  .botton_grey {
    float: right;
    width: 256rpx;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 80rpx;
    font-weight: 400;
    color: rgba(99, 99, 99, 1);
    background: rgba(229, 229, 229, 1);
  }
}

.tab_box {
  display: flex;
  align-items: center;
  text-align: center;

  .sel {
    color: #673DE7;
    font-size: 30rpx !important;
    font-weight: 600;
  }

  .nsel {
    color: #673DE7;
    font-weight: 400;

  }

  .tab_dd {
    margin-left: 50rpx;
    height: 56rpx;
    line-height: 56rpx;
    border-radius: 30rpx;
    font-size: 26rpx;
    text-align: center;
  }
}

.tab_box_data {
  padding: 20rpx;
  width: 690rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .tab_dd {
    height: 50rpx;
    padding: 0 30rpx;
    line-height: 50rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    text-align: center;
  }

  .sel {
    background: linear-gradient(rgba(108, 88, 213, 1), rgba(170, 86, 215, 1));
    font-weight: 600;
    color: white;
  }


  .nsel {
    font-weight: 400;
    border: 1px solid rgba(108, 88, 213, 1);
    color: rgba(108, 88, 213, 1);
  }

}

.hade_input {
  margin: 10rpx 15rpx;
  height: 82rpx;
  background: #F5F4FF;
  border-radius: 36rpx;
  display: flex;
  align-items: center;

  image {
    width: 40rpx;
    height: 40rpx;
  }
}

.search_input {
  font-weight: 500;
  flex: 1;
  height: 80rpx;
  padding-left: 20rpx;
  font-size: 26rpx;
  color: rgb(108, 88, 213);
}

.search_size {
  color: rgb(108, 88, 213);
}

/deep/ .uni-popup__wrapper center {
  background-color: none;
}

.popup-content {
  width: 636rpx;
  height: 480rpx;
  background: #F8F6FF;
  border-radius: 32rpx;
  text-align: center;

  .feiyong {
    margin: 40rpx auto;
    width: 522rpx;
    height: 34rpx;
    font-size: 34rpx;

    font-weight: 600;
    color: #333333;
    line-height: 34rpx;
  }

  .text1 {
    width: 104rpx;
    height: 108rpx;
    font-size: 48rpx;
    line-height: 108rpx;

    // 字体渐变
    background: var(--buttonBcak);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .text2 {
    // 字体渐变
    background: var(--buttonBcak);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .botton {
    width: 520rpx;
    height: 84rpx;
    margin: 140rpx auto;
    border-radius: 42rpx;
    line-height: 84rpx;
    color: white;
  }
}

// 中签
.popup-zhongqian-content {
  .text1 {
    margin: 40rpx auto;
    padding-top: 20rpx;
    width: 500rpx;
    text-align: center;
  }

  .text2 {
    width: 466rpx;
    height: 30rpx;
    font-size: 30rpx;
    font-weight: 400;
    line-height: 30rpx;
  }

  .botton2 {
    width: 520rpx;
    height: 84rpx;
    margin: 40rpx auto;
    border-radius: 42rpx;
    line-height: 84rpx;
    color: white;
  }
}



/deep/ .uni-numbox__minus {
  color: #6958D5;
  width: 56rpx;
  height: 56rpx;
  border-radius: 4rpx 0rpx 0rpx 4rpx;
  border: 2rpx solid #6958D5;
}

/deep/ .uni-numbox__plus {
  color: #6958D5 !important;
  width: 56rpx !important;
  height: 56rpx !important;
  border-radius: 0rpx 4rpx 4rpx 0rpx;
  border: 2rpx solid #6958D5 !important;
}


/deep/ .uni-numbox__value {
  box-sizing: border-box;
  width: 82rpx !important;
   height: 56rpx !important;
  color: #6958D5 !important;
  border-top: 2rpx solid #6958D5 !important;
  border-bottom: 2rpx solid #6958D5 !important;
}


.row_class {
  width: 690rpx;
  margin: 30rpx auto;
}

.chunk {
  width: 230rpx;
  height: 300rpx;
}

//排行
.row_image {
  width: 176rpx;
  height: 176rpx;
  border-radius: 20rpx;
}

.row_chunk_image {
  position: relative;
  margin-bottom: 20rpx;
}

.row_ids {
  position: absolute;
  bottom: -10rpx;
  left: 44%;
}

.row_tow {
  margin-top: 30rpx;

  image {
    border: 4rpx solid #31EDFF;
  }

  .row_ids {
    width: 42rpx;
    height: 42rpx;
    background: #31EDFF;
    border-radius: 40rpx;
  }
}

.row_one {
  image {
    border: 8rpx solid #FFCF31;
  }

  .row_ids {
    width: 42rpx;
    height: 42rpx;
    background: #FFCF31;
    border-radius: 40rpx;
  }
}

.row_three {
  margin-top: 30rpx;

  image {
    border: 4rpx solid #B6DADE
  }

  .row_ids {
    width: 42rpx;
    height: 42rpx;
    background: #B6DADE;
    border-radius: 40rpx;
  }
}

.row_tid {
  margin: 20rpx auto 0 auto;
  width: 200rpx;
  font-size: 20rpx;
  color: #6958D5;
  line-height: 20rpx;
}

.row_name {
  margin: 0 auto 20rpx auto;
  width: 168rpx;
  font-size: 20rpx;
  color: #6958D5;
}
.row_img_src {
  width: 230rpx;
  text-align: center;
  height: 65rpx;
  image {
    border: 0;
    width: 198rpx;
    height: 65rpx;
  }
}

.switch_class {
  width: 690rpx;
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  margin-top: 40rpx;
  padding-left: 80rpx;
}



.row_tx {
  width: 111rpx;
  height: 111rpx;
}

.row_mess {
  width: 430rpx;
  //color: var(--selectColorSize);
  text-align: left;
}

.row_grade {
  width: 61rpx;
  height: 61rpx;
  background: rgba(113, 76, 213, 1);
  border-radius: 40rpx;
  text-align: center;
  line-height: 61rpx;
  color: white;
  margin-top: 14rpx;
}

.popup-content {
  width: 636rpx;
  height: 480rpx;
  background: #F8F6FF;
  border-radius: 32rpx;
  text-align: center;

  .feiyong {
    margin: 40rpx auto;
    width: 522rpx;
    height: 130rpx;
    font-size: 30rpx;

    font-weight: 400;
    color: #333333;
    line-height: 54rpx;
  }

  .text1 {
    margin: 0 auto;
    width: 104rpx;
    height: 108rpx;
    font-size: 48rpx;
    line-height: 138rpx;

    // 字体渐变
    background: var(--buttonBcak);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .text2 {
    // 字体渐变
    background: var(--buttonBcak);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .botton2 {
    width: 520rpx;
    height: 84rpx;
    margin: 80rpx auto;
    border-radius: 42rpx;
    line-height: 84rpx;
    color: white;
  }
}
.total-btn{
	position: fixed;
	bottom: 200rpx;
	right: 0;
	width: 40rpx;
	height: 210rpx;
	z-index:9999;
	.total-bg{
		width:100%;
		height:100%
	}
	.total-text{
		position: absolute;
		left: 4rpx;
		right: 0;
		top: 26rpx;
		bottom: 0;
		color:white;
		font-size: 26rpx;
		text-align: center;
	}
}
</style>
